tags: Vue.js ItIron2020

前言

我們在昨天的文章中介紹了vue實體中最重要的兩個屬性，data & methods，並且成功的將我們寫的一個函數利用v-on掛載到button上，達到事件監聽的效果! 其實v-on只是眾多vue directives之一，還有很多好用的directives等著我們使用，今天就來好好地介紹一下什麼是vue directives，並從最常見的v-on & v-bind來做介紹!

到底什麼是vue directives

坦白講我一直沒有找到非常貼切的中文翻譯，所以暫時我先用directives做說明。其實vue directives就是一種在vue中可以讓你掛在HTML元素上的特殊指令，常見的有以下

• v-on
• v-model
• v-bind
• v-if
• v-show
• v-for

這些指令可以幫助我們輕鬆的監控事件、同步資料或是渲染元件，有著許許多多神奇的用途，會利用這幾天的文章慢慢地介紹，在template中你常常會看到類似以下的寫法，我們之後會慢慢說明，現在只要有個印象就好。

<template>
  <div id="app">
    <label for="name">輸入你想顯示的文字吧!</label>
    <input type="text" v-model="message" name="msg">
    <h1 v-if="isWelcomed">{{ message }}</h1>
    <img :src="imgSrc">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue!',
      imgSrc: 'https://upload.cc/i1/2020/08/23/rGPIy0.jpg',
      isWelcomed: true
    };
  }
};
</script>

上方簡單的程式碼便會呈現以下的畫面，仔細觀察一下data內的值與template的關係，一樣先有個印象就好，等文章結束後相信大家都能看懂發生什麼事情了:D

認識 v-on: Vue中的event handler!

在上篇文章中我們已經簡單介紹過v-on，就像上一篇文章說過的，v-on幾乎適用於所有原生DOM事件

<h1 v-on:click="method">Click me!</h1>
<h1 v-on:dblclick="method">Double Click me!</h1>
<form v-on:submit="method">...</form>
<input v-on:keydown="method"
placeholder="Press down on keys" />
<input v-on:keyup="method"
placeholder="Release keys" />

此外，v-on也提供縮寫以及行內(inline-javascript)的寫法

// 原始寫法
<h1 v-on:click="method">Click me!</h1>

// 縮寫
<h1 @click="method">Click me!</h1>

// 縮寫 & inline-javascript
<h1 @click="isAdmin = true">Click me!</h1>

同時，vue也提供了各種修飾符(event modifiers)讓我們更精確的做事件監聽處理。 舉個例子來說，以往我們在寫原生js的時候，常常需要使用到event.preventDefault() 或是 event.stopPropagation()，在vue中可以輕易地利用修飾符達到一樣的效果。 我們可以看一下官方文件提供的範例進一步的了解

<!-- 下方的點擊事件將不會繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 下方的submit事件將不會刷新頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符是可以彼此串接的 -->
<a v-on:click.stop.prevent="doThat"></a>

而除了事件的修飾符，vue還提供了特殊按鍵的監聽修飾符(Key Modifiers)，讓我們可以簡單的根據使用者按下的key去決定觸發的事件

<!-- 下方的點擊事件將會由enter按鍵觸發 -->
<input v-on:keyup.enter="submit">

<!-- 方的點擊事件將會由Alt + C 觸發-->
<input v-on:keyup.alt.67="clear">

認識 v-bind: Vue中的屬性綁定!

我們知道data中的屬性可以透過Mustache Syntax呈現在template上，但要是今天HTML的一些屬性、甚至是樣式想透過script來調整該怎麼辦? 舉個例子來說，今天有個圖片，其來源可能會隨時變動，你要怎麼用vue達到這一點呢? 這時候就是v-bind的出場時機了! 還記得一開始的例子嗎?

<template>
  <div id="app">
    <img v-bind:src="imgSrc">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: 'https://upload.cc/i1/2020/08/23/rGPIy0.jpg'
    };
  }
};
</script>

在這個使用情境中，我們將圖片檔的來源綁定data中的imgSrc屬性，所以之後要修改圖片的話，只要修改data中對應的數值即可! 是不是很方便呢?
基本上常見的HTML屬性都可以透過v-bind來綁定，像是href、id、class等，若你習慣使用各種前端套件開發，其中各種自定義的屬性也都是靠v-bind去處理!

當然，貼心的vue自然也提供了縮寫的方式，上方的範例可以藉由縮寫方式改寫

<img :src="imgSrc">

除了與HTML屬性綁定外，v-bind也支援style的綁定(以物件形式接收)。

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

另一種常見的用法則是針對class做動態綁定(以陣列形式接收)

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

// 以上的程式碼最終會render出以下的元素

<div class="active text-danger"></div>

你也可以配合條件式去決定要綁定哪個class，下方的範例必定會綁定errorClass，但activeClass會依據isActive的值決定要不要綁定

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

結語

今天我們介紹了vue中最重要的兩個directives，v-on & v-bind，我們談了如何應用今天所學達成最基本的事件監聽與屬性綁定，這兩個指令的應用範圍都極廣，各位可以透過codepen之類的線上編輯器親自體驗一下，或是直接參照今天示範的簡易pen，裡面還有還沒介紹到的v-model & v-if，可以先體驗一下:D 後續會慢慢介紹的，不用緊張! 那今天就到此為止，本來是打算至少講一半指令的，不過這個字數再衝下去可不行XD

參考文章

vue官方文件